<script setup lang="ts">
  import { computed } from "vue";
  import type { Mail } from "@/data/mails.ts";
  import { Icon } from "@iconify/vue";
  import addDays from "date-fns/addDays";
  import addHours from "date-fns/addHours";
  import { format } from "date-fns/format";
  import zh from "date-fns/locale/zh-CN";
  import { nextSaturday } from "date-fns/nextSaturday";
  import { Calendar } from "@/components/ui/calendar";
  import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
  } from "@/components/ui/dropdown-menu";
  import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
  import { Avatar, AvatarFallback } from "@/components/ui/avatar";
  import { Button } from "@/components/ui/button";
  import { Label } from "@/components/ui/label";
  import { Separator } from "@/components/ui/separator";
  import { Switch } from "@/components/ui/switch";
  import { Textarea } from "@/components/ui/textarea";
  import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
  import ScrollArea from "@/components/ui/scroll-area/ScrollArea.vue";

  interface MailDisplayProps {
    mail: Mail | null;
  }

  const props = defineProps<MailDisplayProps>();

  const mailFallbackName = computed(() => {
    return props.mail?.name
      .split(" ")
      .map((chunk) => chunk[0])
      .join("");
  });

  const today = new Date();
</script>

<template>
  <div class="flex h-full flex-col">
    <div class="flex items-center p-2">
      <div class="flex items-center gap-2">
        <Tooltip>
          <TooltipTrigger as-child>
            <Button variant="ghost" size="icon" :disabled="!mail">
              <Icon icon="lucide:archive" class="size-4" />
              <span class="sr-only">归档</span>
            </Button>
          </TooltipTrigger>
          <TooltipContent>归档</TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger as-child>
            <Button variant="ghost" size="icon" :disabled="!mail">
              <Icon icon="tabler:shield-off" class="size-4" />
              <span class="sr-only">移动到垃圾邮件</span>
            </Button>
          </TooltipTrigger>
          <TooltipContent>移动到垃圾邮件</TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger as-child>
            <Button variant="ghost" size="icon" :disabled="!mail">
              <Icon icon="lucide:trash-2" class="size-4" />
              <span class="sr-only">移动到回收站</span>
            </Button>
          </TooltipTrigger>
          <TooltipContent>移动到回收站</TooltipContent>
        </Tooltip>
        <Separator orientation="vertical" class="mx-1 h-6" />
        <Tooltip>
          <Popover>
            <PopoverTrigger as-child>
              <TooltipTrigger as-child>
                <Button variant="ghost" size="icon" :disabled="!mail">
                  <Icon icon="lucide:clock" class="size-4" />
                  <span class="sr-only">Snooze</span>
                </Button>
              </TooltipTrigger>
            </PopoverTrigger>
            <PopoverContent class="flex w-[535px] p-0">
              <div class="flex flex-col gap-2 border-r px-2 py-4">
                <div class="px-4 text-sm font-medium">Snooze until</div>
                <div class="grid min-w-[250px] gap-1">
                  <Button variant="ghost" class="justify-start font-normal">
                    今天晚些时候
                    <span class="ml-auto text-muted-foreground">
                      {{ format(addHours(today, 4), "E, h:m b", { locale: zh }) }}
                    </span>
                  </Button>
                  <Button variant="ghost" class="justify-start font-normal">
                    明天
                    <span class="ml-auto text-muted-foreground">
                      {{ format(addDays(today, 1), "E, h:m b", { locale: zh }) }}
                    </span>
                  </Button>
                  <Button variant="ghost" class="justify-start font-normal">
                    本周末
                    <span class="ml-auto text-muted-foreground">
                      {{ format(nextSaturday(today), "E, h:m b", { locale: zh }) }}
                    </span>
                  </Button>
                  <Button variant="ghost" class="justify-start font-normal">
                    下周
                    <span class="ml-auto text-muted-foreground">
                      {{ format(addDays(today, 7), "E, h:m b", { locale: zh }) }}
                    </span>
                  </Button>
                </div>
              </div>
              <div class="p-2">
                <Calendar />
              </div>
            </PopoverContent>
          </Popover>
          <TooltipContent>Snooze</TooltipContent>
        </Tooltip>
      </div>
      <div class="ml-auto flex items-center gap-2">
        <Tooltip>
          <TooltipTrigger as-child>
            <Button variant="ghost" size="icon" :disabled="!mail">
              <Icon icon="lucide:reply" class="size-4" />
              <span class="sr-only">回复</span>
            </Button>
          </TooltipTrigger>
          <TooltipContent>回复</TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger as-child>
            <Button variant="ghost" size="icon" :disabled="!mail">
              <Icon icon="lucide:reply-all" class="size-4" />
              <span class="sr-only">回复全部</span>
            </Button>
          </TooltipTrigger>
          <TooltipContent>回复全部</TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger as-child>
            <Button variant="ghost" size="icon" :disabled="!mail">
              <Icon icon="lucide:forward" class="size-4" />
              <span class="sr-only">转发</span>
            </Button>
          </TooltipTrigger>
          <TooltipContent>转发</TooltipContent>
        </Tooltip>
      </div>
      <Separator orientation="vertical" class="mx-2 h-6" />
      <DropdownMenu>
        <DropdownMenuTrigger as-child>
          <Button variant="ghost" size="icon" :disabled="!mail">
            <Icon icon="lucide:more-vertical" class="size-4" />
            <span class="sr-only">更多</span>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
          <DropdownMenuItem>标记为未读</DropdownMenuItem>
          <DropdownMenuItem>Star thread</DropdownMenuItem>
          <DropdownMenuItem>Add label</DropdownMenuItem>
          <DropdownMenuItem>Mute thread</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </div>
    <Separator />
    <div v-if="mail" class="flex flex-1 flex-col">
      <div class="flex items-start p-4">
        <div class="flex items-start gap-4 text-sm">
          <Avatar>
            <AvatarFallback>
              {{ mailFallbackName }}
            </AvatarFallback>
          </Avatar>
          <div class="grid gap-1">
            <div class="font-semibold">
              {{ mail.name }}
            </div>
            <div class="line-clamp-1 text-xs">
              {{ mail.subject }}
            </div>
            <div class="line-clamp-1 text-xs">
              <span class="font-medium">答复：</span> {{ mail.email }}
            </div>
          </div>
        </div>
        <div v-if="mail.date" class="ml-auto text-xs text-muted-foreground">
          {{ format(new Date(mail.date), "PPpp",{locale:zh}) }}
        </div>
      </div>
      <Separator />
      <scroll-area class="flex flex-1 whitespace-pre-wrap p-4 h-[40px] text-sm">
        <div>
          {{ mail.text }}
        </div>
      </scroll-area>

      <Separator class="mt-auto" />
      <div class="p-4">
        <form>
          <div class="grid gap-4">
            <Textarea class="p-4 max-h-96" :placeholder="`回复 ${mail.name}...`" />
            <div class="flex items-center">
              <Label html-for="mute" class="flex items-center gap-2 text-xs font-normal">
                <Switch id="mute" aria-label="Mute thread" />
                Mute this thread
              </Label>
              <Button type="button" size="sm" class="ml-auto"> Send</Button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <div v-else class="p-8 text-center text-muted-foreground">未选择任何消息</div>
  </div>
</template>

<style scoped></style>